<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <div class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true" />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                    <!-- <router-view></router-view> -->
                    <!-- 第三行数据 -->
                    <div class="content-box">
                        <!-- 左侧 -->
                        <div class="left-box">
                            <dv-border-box-10>
                                <div>
                                    <div class="left-box1">
                                        <p style="margin-left: 20px;padding-top: 15px;color:#fafafb">文电效能监察考核统计</p>
                                    </div>
                                    <div class="left-box2" id="aaa"></div>
                                    <div class="left-box3" id="111"></div>
                                    <div class="left-box4" id="222"></div>
                                </div>
                            </dv-border-box-10>
                        </div>

                        <!-- 中间 -->
                        <div class="content-box">
                            <div class="content-box1">
                                <dv-border-box-2>
                                    <div style="display: flex;">
                                        <div class="content-box11">
                                            <p style="padding-left: 20px;padding-top: 10px;color:#fff;">生产总值GDP分季度数值</p>
                                            <div style="width: 100%;height:250px;" id="content-box11-chart"></div>
                                            <div style="width: 100%;height:300px" id="444">
                                            </div>
                                        </div>
                                        <div class="content-box111">
                                            <ditu />
                                        </div>
                                    </div>
                                </dv-border-box-2>
                                <div class="content-box2" id="eee">

                                </div>
                            </div>

                        </div>
                        <!-- 右侧 -->

                        <div class="right-box">
                            <div class="right-box1">
                                <div class="right-box11">
                                    <p style="color: #ffffff; margin-left: 20px;padding-top: 15px;">重点工作进度</p>
                                </div>
                                <div class="right-box111" id="qqq">

                                </div>
                            </div>
                            <div class="right-box2">
                                <div class="right-box22">
                                    <p style="color: #ffffff; margin-left: 20px;padding-top: 15px;">目标任务考核排名TOP5</p>
                                </div>
                                <div class="right-box222">
                                    <div style="width: 100%;height:250px;" id="right-box222-chart"></div>
                                </div>
                            </div>
                            <div class="right-box3">
                                <div class="right-box33">
                                    <p style="color: #ffffff; margin-left: 20px;padding-top: 15px;">各类任务类型分布</p>
                                </div>
                                <div class="right-box333" id="www">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,

} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';
import ditu from '@/components/ditu.vue'
export default defineComponent({
    components: {
        ditu
    },

    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()

            setTimeout(() => {
                var chartDom = document.getElementById('aaa');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('111');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('222');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: 'Referer of a Website',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('content-box11-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '考核分数',
                            type: 'bar',
                            barWidth: '60%',
                            data: [85, 92, 78, 96],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ])
                                }
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff',
                                fontSize: 12,
                                formatter: '{c}分'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('444');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            padAngle: 5,
                            itemStyle: {
                                borderRadius: 10
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('eee');
                var myChart = echarts.init(chartDom);
                var option;

                const colors = ['#5470C6', '#EE6666'];
                option = {
                    color: colors,
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {},
                    grid: {
                        top: 70,
                        bottom: 50
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                onZero: false,
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            axisPointer: {
                                label: {
                                    formatter: function (params) {
                                        return (
                                            'Precipitation  ' +
                                            params.value +
                                            (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                        );
                                    }
                                }
                            },
                            // prettier-ignore
                            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
                        },
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                onZero: false,
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisPointer: {
                                label: {
                                    formatter: function (params) {
                                        return (
                                            'Precipitation  ' +
                                            params.value +
                                            (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                        );
                                    }
                                }
                            },
                            // prettier-ignore
                            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'Precipitation(2015)',
                            type: 'line',
                            xAxisIndex: 1,
                            smooth: true,
                            emphasis: {
                                focus: 'series'
                            },
                            data: [
                                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                            ]
                        },
                        {
                            name: 'Precipitation(2016)',
                            type: 'line',
                            smooth: true,
                            emphasis: {
                                focus: 'series'
                            },
                            data: [
                                3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);

            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('qqq');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [30, 70],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                { value: 40, name: 'rose 1' },
                                { value: 38, name: 'rose 2' },
                                { value: 32, name: 'rose 3' },
                                { value: 30, name: 'rose 4' },
                                { value: 28, name: 'rose 5' },
                                { value: 26, name: 'rose 6' },
                                { value: 22, name: 'rose 7' },
                                { value: 18, name: 'rose 8' }
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500)
            setTimeout(() => {
                var chartDom = document.getElementById('right-box222-chart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['单位名称E', '单位名称D', '单位名称C', '单位名称B', '单位名称A'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            name: '任务数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [
                                {
                                    value: 1143,
                                    itemStyle: {
                                        color: '#39c2e6'
                                    }
                                },
                                {
                                    value: 1154,
                                    itemStyle: {
                                        color: '#34bce2'
                                    }
                                },
                                {
                                    value: 2164,
                                    itemStyle: {
                                        color: '#34bce2'
                                    }
                                },
                                {
                                    value: 2170,
                                    itemStyle: {
                                        color: '#3cc6e9'
                                    }
                                },
                                {
                                    value: 2200,
                                    itemStyle: {
                                        color: '#ffc200'
                                    }
                                }
                            ],
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff',
                                fontSize: 12,
                                formatter: '{c}件'
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);

                // 窗口大小变化时重新调整图表大小
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }, 500);
            setTimeout(() => {
                var chartDom = document.getElementById('www');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            padAngle: 5,
                            itemStyle: {
                                borderRadius: 10
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }, 500)
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11,

        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.content-box {
    width: 100%;
    height: 900px;
    display: flex;
    justify-content: space-around;

    .left-box {
        width: 500px;
        height: 100%;
        margin-top: 10px;
        background-color: #254b75;

        .left-box1 {
            width: 100%;
            height: 50px;
            background-color: #2a435e;
        }

        .left-box2 {
            width: 90%;
            height: 200px;
            margin-top: 40px;
            margin-left: 25px;
        }

        .left-box3 {
            width: 90%;
            height: 200px;
            margin-top: 40px;
            margin-left: 25px;
        }

        .left-box4 {
            width: 90%;
            height: 300px;
            margin-top: 40px;
            margin-left: 25px;
        }
    }

    .content-box {
        width: 700px;
        height: 100%;
        margin-top: 10px;
        margin-left: 90px;


        .content-box1 {
            width: 700px;
            height: 60%;

            .content-box11 {
                width: 300px;
                height: 530px;
                margin-left: 20px;
                background-color: #2a435e;
            }

            .content-box111 {
                width: 500px;
                height: 530px;
            }
        }

        .content-box2 {
            width: 700px;
            height: 60%;
            margin-top: 20px;
            background-color: #2a435e;
        }
    }

    .right-box {
        width: 500px;
        height: 100%;
        margin-top: 10px;
        margin-left: 90px;

        .right-box1 {
            width: 100%;
            height: 250px;
            background-color: #2a435e;

            .right-box11 {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #75c2e7;
            }

            .right-box111 {
                width: 100%;
                height: 200px;
            }
        }

        .right-box2 {
            width: 100%;
            height: 300px;
            margin-top: 30px;
            background-color: #2a435e;

            .right-box22 {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #75c2e7;
            }

            .right-box222 {
                width: 100%;
                height: 250px;
            }
        }

        .right-box3 {
            width: 100%;
            height: 300px;
            background-color: #2a435e;
            margin-top: 30px;

            .right-box33 {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #75c2e7;
            }

            .right-box333 {
                width: 100%;
                height: 250px;
            }
        }
    }
}
</style>
